<template>
  <div class="container">
    <Breadcrumb :items="['menu.form', 'menu.form.payrollprocess']" />
    <!-- <a-spin :loading="loading" style="width: 100%"> -->

    <a-card class="general-card" :title="$t('Scenarios List')">
      <template #extra>
        <a-button type="primary" @click="createScenario"
          >Create New Scenario</a-button
        >
      </template>
      <a-list>
        <a-list-item v-for="scenario in scenarios" :key="scenario.id">
          <a-list-item-meta
            :title="`ID: ${scenario.id}, Name: ${scenario.name}`"
          />
          <template #actions>
            <a-button @click="editScenario(scenario)">Edit</a-button>
            <a-button @click="deleteScenario(scenario.id)">Delete</a-button>
          </template>
        </a-list-item>
      </a-list>
    </a-card>

    <!-- Create/Edit Modal -->
    <a-modal
      v-model:visible="modalVisible"
      title="Scenario Details"
      @ok="saveScenario"
      @cancel="modalVisible = false"
    >
      <a-form :model="currentScenario">
        <a-form-item label="Name">
          <a-input v-model="currentScenario.name" />
        </a-form-item>
        <a-form-item label="Filters">
          <div class="filters-container">
            <div
              v-for="(filter, index) in currentScenario.filters"
              :key="index"
              class="filter-row"
            >
              <a-select
                v-model="filter.field"
                placeholder="Select field"
                style="width: 100%"
              >
                <a-option
                  v-for="option in fieldsOptions"
                  :value="option.value"
                  :key="option.value"
                >
                  {{ option.label }}
                </a-option>
              </a-select>
              <a-input
                v-model="filter.value"
                placeholder="Value"
                style="width: 30%; margin-left: 8px"
              />
              <a-button
                type="text"
                @click="removeFilter(index)"
                icon="minus-circle"
                style="margin-left: 8px; color: red"
              />
            </div>
            <a-button @click="addFilter" style="margin-top: 10px"
              >Add New Conditon</a-button
            >
          </div>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- </a-spin> -->
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import axios from 'axios';
  // import { Breadcrumb, Card, List, ListItem, ListItemMeta, Input, Button, Form, FormItem, Modal, Icon } from '@arco-design/web-vue';

  const scenarios = ref([]);

  const fieldsOptions = ref([
    { label: 'Employee No', value: 'employee_no' },
    { label: 'Employee', value: 'employee' },
    { label: 'Task ID', value: 'task_id' },
    { label: 'Annual Leave', value: 'annual_leave' },
    { label: 'LWOP', value: 'lwop' },
    { label: 'Other Leave', value: 'other_leave' },
    { label: 'PHNW', value: 'phnw' },
    { label: 'Adjusted Work Hours', value: 'adjusted_work_hours' },
    { label: 'Afternoon Hours', value: 'afternoon_hours' },
    { label: 'Clock In', value: 'clock_in' },
    { label: 'Clock Out', value: 'clock_out' },
    { label: 'Date', value: 'date' },
    { label: 'Employee Type', value: 'employee_type' },
    { label: 'Is Camping', value: 'is_camping' },
    { label: 'Is Mult Work', value: 'is_mult_work' },
    { label: 'Is Public Holiday', value: 'is_public_holiday' },
    { label: 'Is Public Holiday+1', value: 'is_public_holiday+1' },
    { label: 'Is Split Shift', value: 'is_split_shift' },
    { label: 'Job', value: 'job' },
    { label: 'Meal Break Adjustment', value: 'meal_break_adjustment' },
    { label: 'Morning Hours', value: 'morning_hours' },
    { label: 'Next Day', value: 'next_day' },
    { label: 'Night Hours', value: 'night_hours' },
    { label: 'Other Leave Detail', value: 'other_leave_detail' },
    { label: 'Overnight', value: 'overnight' },
    { label: 'Pay Rate', value: 'pay_rate' },
    { label: 'Role', value: 'role' },
    { label: 'Roster End Time', value: 'roster_end_time' },
    { label: 'Roster End Time Adjusted', value: 'roster_end_time_adjusted' },
    { label: 'Roster Hours', value: 'roster_hours' },
    { label: 'Roster Start Time', value: 'roster_start_time' },
    { label: 'Shift', value: 'shift' },
    { label: 'Sleepnight Allowance', value: 'sleepnight_allowance' },
    { label: 'Sleepnight Type', value: 'sleepnight_type' },
    { label: 'Total Span Hours', value: 'total_span_hours' },
    { label: 'Total Work Hours', value: 'total_work_hours' },
    { label: 'Weekday', value: 'weekday' },
    { label: 'Weekday+1', value: 'weekday+1' },
    { label: 'Work Hours', value: 'work_hours' },
    { label: 'Work Hours Original', value: 'work_hours_original' },
    { label: 'Work Type', value: 'work_type' },
    { label: 'Overtime Pay Detail', value: 'overtime_pay_detail' },
    { label: 'Period', value: 'period' },
    { label: 'Total Base Hours', value: 'total_base_hours' },
    { label: 'Base Pay Detail', value: 'base_pay_detail' },
    { label: 'Base Hours', value: 'base_hours' },
    { label: 'Base Hours+1', value: 'base_hours+1' },
    { label: 'Max Overtime Hours', value: 'max_overtime_hours' },
    { label: 'Meal Allowance', value: 'meal_allowance' },
    { label: 'Split Detail', value: 'split_detail' },
    { label: '$ Afternoon', value: '$ Afternoon' },
    { label: '$ Annual Leave - Base', value: '$ Annual Leave - Base' },
    {
      label: '$ Annual Leave Loading - Base',
      value: '$ Annual Leave Loading - Base',
    },
    {
      label: '$ Annual Leave Loading - PH',
      value: '$ Annual Leave Loading - PH',
    },
    {
      label: '$ Annual Leave Loading - Sat',
      value: '$ Annual Leave Loading - Sat',
    },
    {
      label: '$ Annual Leave Loading - Sun',
      value: '$ Annual Leave Loading - Sun',
    },
    { label: '$ Night', value: '$ Night' },
    { label: '$ ORD', value: '$ ORD' },
    { label: '$ OT - PH', value: '$ OT - PH' },
    { label: '$ OT 1.5 (first 2 hours)', value: '$ OT 1.5 (first 2 hours)' },
    { label: '$ OT 2.0 (after 2 hours)', value: '$ OT 2.0 (after 2 hours)' },
    { label: '$ OT SUN', value: '$ OT SUN' },
    { label: '$ Other Leave', value: '$ Other Leave' },
    { label: '$ PH', value: '$ PH' },
    { label: '$ PHNW', value: '$ PHNW' },
    {
      label: '$ Penalty - Broken Shift >12h Span',
      value: '$ Penalty - Broken Shift >12h Span',
    },
    { label: '$ SAT', value: '$ SAT' },
    { label: '$ SUN', value: '$ SUN' },
    { label: '$ Top-up Hours (Min 2h)', value: '$ Top-up Hours (Min 2h)' },
    { label: '$ Sleepover 1.5', value: '$ Sleepover 1.5' },
    { label: '$ Sleepover 2.0', value: '$ Sleepover 2.0' },
    { label: '$ Sleepover 2.5', value: '$ Sleepover 2.5' },
  ]);

  const currentScenario = ref({
    id: '',
    name: '',
    filters: [
      { field: '', value: '' },
      { field: '', value: '' },
      { field: '', value: '' },
    ],
  });
  const modalVisible = ref(false);
  const loading = ref(false);

  const fetchScenarios = async () => {
    loading.value = true;
    try {
      const response = await axios.get(
        'http://101.35.43.81:8111/api/scenarios/'
      );
      scenarios.value = response.data; // Assuming data is the correct field
    } catch (error) {
      console.error('Error fetching scenarios:', error);
    } finally {
      loading.value = false;
    }
  };

  const createScenario = () => {
    currentScenario.value = { id: '', name: '', filters: [] };
    modalVisible.value = true;
  };

  const editScenario = (scenario) => {
    console.log('editScenario');
    currentScenario.value = { ...scenario };
    if (!currentScenario.value.filters) {
      currentScenario.value.filters = [];
    }
    modalVisible.value = true;
  };

  const addFilter = () => {
    currentScenario.value.filters.push({ field: '', value: '' });
  };

  const removeFilter = (index) => {
    currentScenario.value.filters.splice(index, 1);
  };

  const saveScenario = async () => {
    const method = currentScenario.value.id ? 'PUT' : 'POST';
    const url = currentScenario.value.id
      ? `http://101.35.43.81:8111/api/scenarios/${currentScenario.value.id}/`
      : 'http://101.35.43.81:8111/api/scenarios/';

    try {
      await axios({
        method,
        url,
        data: currentScenario.value,
      });
      fetchScenarios();
      modalVisible.value = false;
    } catch (error) {
      console.error('Error saving scenario:', error);
    }
  };

  const deleteScenario = async (id) => {
    try {
      await axios.delete(`http://101.35.43.81:8111/api/scenarios/${id}/delete`);
      fetchScenarios();
    } catch (error) {
      console.error('Error deleting scenario:', error);
    }
  };

  onMounted(fetchScenarios);
</script>

<style scoped>
  .filters-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
  }

  .filter-row {
    display: flex;
    align-items: center;
  }

  .container {
    padding: 0 20px 40px 20px;
    overflow: hidden;
  }
</style>
